// 引入css
require("../css/run-data.less");

const echarts = require("../lib/echarts/echarts.min")

// 入口函数
document.ready(function () {
    // 登录拦截
    window.$check.checkLogin();

    // 获取id
    const userId = JSON.parse(window.localStorage.getItem("user")).userId;
    console.log("用户id是", userId);

    // 点击返回上一步
    const back = document.querySelector(".back");
    back.addEventListener("click", function () {
        history.back();
    })

    //! 封装函数来初始化echarts实例 和显示图表
    function initChart(item, op) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(item));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(op);
    }

    //! 运动时长
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '近7天运动时长',
            left: 10 + "px",
            top: 15 + "px",
            textStyle: {
                color: "#000",
                fontWeight: "normal",
                fontSize: 16
            }
        },
        color: ["#3398DB"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        grid: {},
        xAxis: [{
            type: "category",
            data: []
        }],
        yAxis: [{
            type: "value"
        }],
        series: [{
            name: "时长",
            type: "bar",
            barWidth: "60%",
            data: []
        }]
    };

    //! 运动分类
    var option2 = {
        title: {
            text: '运动分类',
            left: "10px",
            top: "10px",
            textStyle: {
                color: "#000",
                fontWeight: "normal",
                fontSize: 16
            }

        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'

        },
        legend: {
            orient: 'vertical',
            left: '10px',
            top: "35px",
            icon: 'roundRect',
            itemWidth: 10,
            itemHeight: 10,

        },
        series: [{
            name: '运动分类',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],

            data: [],
            label: {
                color: '#fff',
                show: true,
                position: 'inside',
                formatter: '{d}%',

            },
            color: ["#736171", "#EE5C43", "#58BB92"],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };



    //! 近七天运动分类
    var option3 = {
        title: {
            text: '近7天运动分类',
            left: 10 + "px",
            top: 15 + "px",
            textStyle: {
                color: "#000",
                fontWeight: "normal",
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['跑步', '训练', '骑行', ],
            right: 0,
            top: "0",
            orient: "vertical",
            icon: 'roundRect',
            itemWidth: 10,
            itemHeight: 10,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: []
        },
        color: ["#736171", "#EE5C43", "#58BB92"],
        series: [{
                name: '跑步',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
            },


        ]
    };


    //! 训练次数
    var option4 = {
        title: {
            text: '近7天训练次数',
            left: 10 + "px",
            top: 15 + "px",
            textStyle: {
                color: "#000",
                fontWeight: "normal",
                fontSize: 16
            }
        },
        xAxis: {
            type: 'category',
            data: ["5-17", "5-18", "5-19", "5-20", "5-21", "5-22", "5-23"]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [15, 23, 22, 28, 15, 17, 20],
            type: 'line'
        }]
    };
    initChart("num", option4);

    window.$http.get(`/sport/data/${userId}`, function (res) {
        let classifyObj = {
            "跑步": 0,
            "训练": 0,
            "骑行": 0,
        }
        console.log(res);
        res.data.days.forEach(item => {
            //todo 运动时长
            option1.xAxis[0].data.push(item.date.substr(5).replace("-", "."));
            option1.series[0].data.push(item.dayTimes);

            //todo运动分类
            item.exerciseData.forEach(val => {
                // console.log(val);
                classifyObj[val.type] += val.time - 0;

                if (val.type == "跑步") {
                    option3.series[0].data.push(val.time);
                } else if (val.type == "训练") {
                    option3.series[1].data.push(val.time);
                } else if (val.type == "骑行") {
                    option3.series[2].data.push(val.time);
                }
            })
            // console.log(option1.xAxis[0].data);
            //todo七天运动分类
            option3.yAxis.data.push(item.date);

        })


        // 遍历对象 修改option2参数
        for (var k in classifyObj) {
            option2.series[0].data.push({
                value: classifyObj[k],
                name: k
            })
        }
        // console.log(classifyObj);

        initChart("main", option1);
        initChart("container", option2);
        initChart("classify", option3);
    })
})
